<template>
  <div class="tw-image"
    :style="{backgroundImage: `linear-gradient(${deg}deg, ${bgColor1}, ${bgColor2 || bgColor1})`, textAlign: align}">
    <template v-if="useClick">
      <img @click="clickHandle"
      :style="{width: imgWidth, height: imgHeight, objectFit: objectFit}"
      v-if="image && image.length>0"
      :src="`${$twApp.fileBaseUrl}${image[0].localPath}`" />

      <img @click="clickHandle"
      :style="{width: imgWidth, height: imgHeight, objectFit: objectFit}"
      v-else-if="imgList && imgList.length>0 && imgList[0].localPath"
      :src="`${imgList[0].localPath}`" />
    </template>
    <template v-else>
      <img
      :style="{width: imgWidth, height: imgHeight, objectFit: objectFit}"
      v-if="image && image.length>0"
      :src="`${$twApp.fileBaseUrl}${image[0].localPath}`" />

      <img
      :style="{width: imgWidth, height: imgHeight, objectFit: objectFit}"
      v-else-if="imgList && imgList.length>0 && imgList[0].localPath"
      :src="`${imgList[0].localPath}`" />
    </template>

    <span v-if="text" class="tw-image-text" :style="{color: textColor, top: textTop, left: textLeft, fontSize: textFontSize, fontWeight: isBold?'700':'400'}">{{text}}</span>
    <span v-else-if="imgList && imgList.length>0 && imgList[0].text" class="tw-image-text" :style="{color: textColor, top: textTop, left: textLeft, fontSize: textFontSize, fontWeight: isBold?'700':'400'}">{{imgList[0].text}}</span>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'image',

  props,

  methods: {
    clickHandle () {
      if (typeof this.clickFn === 'function') {
        this.clickFn(this)
      }
    }
  }
}
</script>

<style lang="scss">
  .tw-image {
    width: 600px;
    height: 300px;
    overflow: hidden;
  }

  .tw-image > img {
    width: 100%;
    height: 100%;
  }

  .tw-image-text {
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
